<template>
  <div style="margin-top: 65px">
    <sunDrawerBack show="show_roles" :parent="this.$parent.$parent" />
    <el-page-header class="sun-el-page-header" :content="`管理员【${currentItem.name}】`" @back="goBack" />
    <el-card class="sun-el-card" style="margin-bottom: 94px !important;">
      <el-table
        ref="table"
        :data="list"
        element-loading-text="数据加载中..."
        border
        fit
        highlight-current-row
        :header-cell-style="{color:'#000000'}"
        @selection-change="selectionChange"
      >
        <el-table-column type="selection" align="center" width="55" prop="30" />
        <el-table-column label="角色名称" prop="name" />
        <el-table-column align="center" label="创建时间" prop="created_at" width="200" />
        <el-table-column align="center" label="更新时间" prop="updated_at" width="200" />
        <el-table-column align="center" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="checkInfo(scope.row)">
              查看权限
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="sun-drawer-base-btn">
      <el-button size="mini" :disabled="is_submit" @click="goBack">取 消</el-button>
      <el-button type="primary" size="mini" :loading="is_submit" @click="submit">提 交</el-button>
    </div>
  </div>
</template>

<script>
import { put } from '@/api/request'
import SunDrawerBack from '@/sun-components/SunDrawerBack'
export default {
  name: 'AdminRoles',
  components: { SunDrawerBack },
  data() {
    return {
      searchList: [],
      tabList: [],
      roles_id: [],
      is_submit: false
    }
  },
  computed: {
    list() {
      return this.$parent.$parent.rolesList
    },
    currentItem() {
      return this.$parent.$parent.currentItem
    },
    show_roles() {
      return this.$parent.$parent.show_roles
    }
  },
  watch: {
    show_roles: {
      handler: function(show) {
        if (show) {
          const _that = this
          _that.$nextTick(() =>
            _that.list?.forEach(item => {
              if (_that.currentItem.rolesId.includes(item.id)) {
                _that.$refs.table.toggleRowSelection(item, true)
              }
            })
          )
        }
      }
    }
  },
  created() {
    const _that = this
    if (_that.show_roles) {
      _that.$nextTick(() =>
        _that.list?.forEach(item => {
          if (_that.currentItem.rolesId.includes(item.id)) {
            _that.$refs.table.toggleRowSelection(item, true)
          }
        })
      )
    }
  },
  methods: {
    async checkInfo(row) {
      this.$parent.$parent.show_checkPermissions = true
      this.$parent.$parent.checkPermissions = row
    },
    async selectionChange(list) {
      this.roles_id = []
      list.forEach((item) => {
        this.roles_id.push(item.id)
      })
    },
    async submit() {
      this.is_submit = true
      await put(`admins/assign/roles/${this.currentItem.id}`, { roles: this.roles_id }).then(response => {
        if (response.code === 0) {
          this.goBack()
          this.$parent.$parent.upData()
        }
        this.is_submit = false
      })
    },
    async goBack() {
      this.$parent.$parent.show_roles = false
      this.$refs.table.clearSelection()
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/sun-style.scss';
</style>
